<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>控制台 - 教学管理系统首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <#include "../../head/common-css.ftl" />
    <#include "../../head/common-js.ftl" />
    <link rel="stylesheet" href="${request.contextPath}/css/chosen.css"/>
    <script type="text/javascript" src="${request.contextPath}/js/chosen.jquery.js"></script>
    <script>
        $(function () {
            var menuIds;
            // 属性菜单属性配置
            var setting = {
                view: {
                    selectedMulti: false,
                },
                check: {
                    enable: true,
                    chkStyle: "checkbox",
                    chkboxType: {"Y": "ps", "N": "ps"}
                },
                data: {
                    simpleData: {
                        enable: true,
                        pIdKey: "pid"
                    },
                    key: {
                        name: "menuName"
                    }
                },
                callback: {
                    onCollapse: function () {
                        reinitTreeHight(window.parent.frames[0], '#widget-roleMenuTree');
                    },
                    onExpand: function () {
                        reinitTreeHight(window.parent.frames[0], '#widget-roleMenuTree');
                    },
                    onCheck: function (event, treeId, treeNode) {
                        menuIds = [];
                        $("#permissionIds").empty();
                        $("#permissionIds").trigger("liszt:updated");//修改选中或添加项必须增加这一行
                        $("#permissionIds").chosen();
                        var treeObj = $.fn.zTree.getZTreeObj(treeId);
                        var nodes = treeObj.getCheckedNodes(true);
                        if (nodes.length > 0) {
                            $('#rolePemission').show();
                            $.each(nodes, function (i, node) {
                                menuIds.push(node.id);
                            });
                            extracted(menuIds);
                        }
                    }
                }
            };
            var url = "";
            var param = {};
            if ($('#id').val() == '') {
                url = '${request.contextPath}/sys/menu/doList.do';
                param.isMenu = '1';
            } else {
                url = '${request.contextPath}/sys/role/doRoleMenuChecked.do';
                param.roleId = $('#id').val();
            }
            // 请求菜单数据
            $.ajax({
                url: url,
                type: "post",
                dataType: "json",
                data: param,
                success: function (msg) {
                    //要执行的代码
                    if (!msg.success) {
                        layer.msg(msg.msg);
                        return;
                    }
                    //登录成功跳转页面
                    var treeObj = $.fn.zTree.init($("#roleMenuTree"), setting, msg.results);
                    var nodes = treeObj.getCheckedNodes(true);
                    if (nodes.length > 0) {
                        menuIds = [];
                        $('#rolePemission').show();
                        $.each(nodes, function (i, node) {
                            menuIds.push(node.id);
                        });
                        extracted(menuIds);
                    }
                }
            });

            // 表单信息提交
            var validator = $('#role-form').validate({
                // 错误展示位置
                errorPlacement: function (error, element) {
                    $(element).parent().append(error);
                },
                errorElement: 'label',
                errorClass: 'help-inline',
                focusInvalid: true,
                onfocusout: false,
                rules: {
                    roleName: {
                        required: true
                    },
                    roleCode: {
                        required: true,
                        remote: {          //远程ajax验证
                            url: "${request.contextPath}/sys/role/doCheck.do", //检查是否存在账号，存在则返回true
                            type: "POST",
                            dataType: "json",
                            data: {
                                roleCode: $("#roleCode").val() //这个是取要验证的用户名
                            },
                            dataFilter: function (data) {  //判断控制器返回的内容
                                var notice = eval("(" + data + ")");
                                if (!notice.success) {
                                    layer.msg("查询失败.", {icon: 2});
                                    return false;
                                }
                                if (notice.result != null && notice.result != $('#id').val()) {
                                    return false;
                                }
                                return true;
                            }
                        }
                    }
                },
                messages: {
                    roleName: {
                        required: '请填写权限名'
                    },
                    roleCode: {
                        required: '请填写权限Code',
                        remote: '角色Code已存在,请检查.'
                    }
                },
                invalidHandler: function (event, validator) { //display error alert on form submit
                    $('.alert-danger', $('#validation-form')).show();
                },
                highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                },
                success: function (e) {
                    $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                    $(e).remove();
                },
                errorPlacement: function (error, element) {
                    error.insertAfter(element);
                },
                submitHandler: function (form) {
                    form = $(form).serializeJson();
                    form.menuIds = menuIds;
                    //进行ajax传值
                    $.ajax({
                        url: "doOperate.do",
                        type: "post",
                        dataType: "json",
                        data: form,
                        success: function (msg) {
                            //要执行的代码
                            if (!msg.success) {
                                layer.msg(msg.msg);
                                return;
                            }
                            layer.msg('操作成功', {icon: 6}, function () {
                                $(top.document).find("iframe").each(function () {
                                    if ($(this).attr('src').indexOf("role/list.htm") > -1) {
                                        $(this).attr('src', $(this).attr('src'));
                                        reinitTreeHight(this);
                                    }
                                });
                            });

                        }
                    });
                    return false;
                }
            });
        })
    </script>

</head>
<body>
<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <!-- table end -->
            <div class="row">
                <div class="col-sm-6">
                    <form class="form-horizontal" role="form" id="role-form">
                        <input type="hidden" name="id" id="id" value="${(role.id)!''}">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h5 class="smaller">角色信息添加</h5>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-6">
                                    <div class="table-responsive page-content" style="height: 300px">
                                        <div class="form-group">
                                            <div class="profile-user-info profile-user-info-striped">
                                                <div class="profile-info-row">
                                                    <div class="profile-info-name">角色名称</div>
                                                    <div class="profile-info-value">
                                                        <input type="text" name="roleName" id="roleName"
                                                               placeholder="请填写角色名称..." value="${(role.roleName)!''}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="profile-user-info profile-user-info-striped">
                                                <div class="profile-info-row">
                                                    <div class="profile-info-name">角色Code</div>
                                                    <div class="profile-info-value">
                                                        <input type="text" name="roleCode"
                                                               placeholder="请填写角色Code.." value="${(role.roleCode)!''}"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group" hidden id="rolePemission">
                                            <div class="profile-user-info profile-user-info-striped">
                                                <div class="profile-info-row">
                                                    <div class="profile-info-name">权限信息</div>
                                                    <div class="profile-info-value" id="permissionInfo">
                                                        <select multiple="" style="width:250px;" id="permissionIds"
                                                                name="permissionIds" data-placeholder="选择权限...">
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix form-actions">
                            <div class="col-md-offset-3 col-md-9">
                                <button class="btn btn-info" type="submit">
                                    <i class="icon-ok bigger-110"></i>
                                    确认
                                </button>
                                <button class="btn" type="reset" id="cancel">
                                    <i class="icon-undo bigger-110"></i>
                                    重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-sm-6">
                    <div class="widget-box">
                        <div class="widget-header">
                            <h5 class="smaller">菜单信息选择</h5>
                        </div>
                        <div class="widget-body">
                            <div class="widget-main padding-6" id="widget-roleMenuTree">
                                <ul id="roleMenuTree" class="ztree">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 查询菜单拥有的权限信息
    function extracted(menuIds) {
        $('#permissionIds').addClass('tag-input-style');
        //进行ajax传值
        $.ajax({
            url: "${request.contextPath}/sys/permission/doRoleMenuPermissions.do",
            type: "post",
            dataType: "json",
            data: {
                'permissionStatus': 1,
                'menuId': menuIds,
                'roleId': $('#id').val()
            },
            success: function (msg) {
                $.each(msg.results, function (i, item) {
                    $("#permissionInfo select").append("<option value='" + item.id + "'" + item.selected + ">" + item.permissionName + "</option>");
                });
                $("#permissionIds").trigger("liszt:updated");//修改选中或添加项必须增加这一行
                $("#permissionIds").chosen();
            }
        });
    }
</script>
</body>